
var versionrecord;
var gid;
var vid;
var versiongroupPanel =new Ext.Panel ({
	id : 'versiongroup-panel',
	title : '版本列表',
	layout : 'border'
		,
	closable : true,
	defaults : {
		bodyStyle : 'padding:15px'
	},
	
	items : {

		region : 'center',
		autoScroll : true,
		border : false,
		contentEl : 'versiongroupCanvas'
	}
});			

var versiongroupStore = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({
		url : 'showVersiongroupView.action?method=showVersiongroupList',
		method : 'post'
	}),
	reader : new Ext.data.JsonReader({
		root : "Versiongroup",
		totalProperty : "totalVersiongroup",
		id : "id"		
	}, [ {
		name : 'id'
	}, {
		name : 'name'
	}, {
		name : 'project'
	}, {
		name : 'department'
	}, {
		name : 'versionId'
	}, {
		name : 'xmlpath'
	}, {
		name : 'type'
	}, {
		name : 'groupId'
	}])
}); 


function showVersiongroup(gname) {
	var cid=gname;
	versiongroupStore.load({ 
    	params : {
			cid : cid
		},
		callback: function(r, options, success) { 
		if (success == false) { 
		alert("加载version数据失败，无对应数据或者系统出现异常！"); 
		}
		else{
//			Ext.getCmp('content-panel').layout.setActiveItem('versiongroup-panel');
//			contentPanel.addTab('versiongroup-panel');
//			var vpage = Ext.getCmp('versiongroup-panel');
//			vpage.showPage();

			var canvas = document.getElementById('versiongroupCanvas');
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawVersionMiniImgList(ctx,versiongroupStore,canvas);


			}
		}
	})
}
var versionMiniImg = new Image();//缩略图图片
versionMiniImg.src = 'images/MiniPic/file.png';

var imgWidth=100;	//每个图标占的宽度
var imgHeight=80;	//每行图标占的高度
var column=8;		//每行的图标个数
var margin=15;		//边缘空出的距离

//绘制缩略图列表
function drawVersionMiniImgList(ctx,versiongroupStore,canvas) {
	ctx.font = "10pt Arial";
	ctx.textBaseline = "top"; // 设置文字垂直对齐方式
	ctx.textAlign = "center"; // 设置文字水平对齐方式	
	
	for(var i=0;i<versiongroupStore.getCount();i++){
		var record=versiongroupStore.getAt(i);
		ix=(i%column)*imgWidth+margin;
		iy=Math.floor(i/column)*imgHeight+margin;
		ctx.drawImage(versionMiniImg,ix,iy,versionMiniImg.width,versionMiniImg.height);
		ctx.fillText(record.get('versionId'), ix+versionMiniImg.width/2,iy+versionMiniImg.height);
	}
	
	canvas.onclick= function(event){onMouseClickVersion(event);};	
}

//鼠标单击事件，单击缩略图转到模型详细数据页面
function onMouseClickVersion(event){
	var x=event.layerX-margin;
	var y=event.layerY-margin;
	
	var index=Math.floor(y/imgHeight)*column+Math.floor(x/imgWidth);//点击到的缩略图的索引
	var right=(index%column)*imgWidth+versionMiniImg.width;//点击到的缩略图的右边x坐标
	var bottom=Math.floor(index/column)*imgHeight+versionMiniImg.height;	//点击到的缩略图的底部的y坐标
	
	if(index>versiongroupStore.getCount()){
		return;
	}else if(x>right || y>bottom){
		return;
	}
//	versiongroupPanel.onClickImg(index,versiongroupPanel);
	
	versionrecord=versiongroupStore.getAt(index);
	gid=versionrecord.get('groupId');
	vid=versionrecord.get('versionId');
	
	//跳转到具体的模型详细数据页面
	Ext.getCmp('content-panel').addTab('viewgroup-panel');
	
	showViewgroup(gid,vid);
}
